目前聊天室有單獨設立一個router，進來到此頁有兩個方法：

1. 首頁輸入暱稱後導入/chat
2. 直接輸入網址localhost:3000/chat

但因為必須要登入才會有使用者資料，所以要避免有人直接輸入網址進入聊天室造成錯誤，所以一進到此頁就要判斷是否有登入，如果沒有登入資料，就將他重新導向到首頁。

一般用Vue可能會在created或mounted的時候做驗證，不過在這些生命週期中做驗證會有一個問題，就是已經進入到此頁，頁面也可能已經渲染出來，這時候才判斷完沒有登入並且導頁，就會有畫面閃動的狀況，這時候用Nuxt裡的asyncData或是fetch就可以解決這個問題。

asyncData是在vue被建立前調用的屬性，所以無法在裡面使用this，也就是說，在vue裡面設定的data、method通通都不能用，但可以拿到context，取得一些可以用的屬性，列一些我比較常用到的，其他可以看官網（誒）。

• app：可以使用plugin，像是可以用有設定好的$socket、$axios
• store：可以拿Vuex的資料
• route：可以取得Vue Router
• params：可以取得Router上的params
• query：可以取得Router上的query
• redirect：重新導頁

asyncData跟fetch主要的差別在於，asyncData會return資料，fetch不會。

舉例來說，有時候我們會在page頁打api，拿回來的資料會需要在vue用，所以使用asyncData將api資料return，return的資料直接灌到vue裡面，就可以直接使用。

那如果說，習慣從Vuex打api，然後page再從Vuex裡取資料，這樣就可以改用fetch，或是像我目前只是要在進來頁面的時候判斷是否有登入，不需要回傳資料，那也是用fetch就可以了。

Nuxt也是依靠asyncData和fetch來做Server Side Render
另外asyncData傳出去的資料都會被處理過，所以是不能傳function出去的

驗證是否登入

asyncData和fetch只能在pages裡做，目前要擋的是pages > chat這頁，在fetch中會用到幾個項目：

• store取的loginData驗證是否存在
• redirect在確定沒登入後導回首頁

<script>
export default {
    fetch({ store, redirect }) {
      if (!store.state.loginData.memberId) {
        redirect('/')
      }
    }
}
</script>

如此這般，就可以測試在直接輸入localhost:3000/chat會不會直接被彈去首頁嚕～d(`･∀･)b